
.bf-wht-bar
    // background: rgba(255, 255, 255, 0.02)
    background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.2))
    backdrop-filter: blur(8px)
    &:hover,
    &:active, &:focus, &:focus-visible
        background: rgba(255, 255, 255, 0.12)

.bf-wht-x2
    background: rgba(255, 255, 255, 0.92)
    backdrop-filter: blur(3px)
    &:hover,
    &:active, &:focus, &:focus-visible
        background: rgba(255, 255, 255, 1)
        
.bf-wht
    background: rgba(255, 255, 255, 0.618)
    backdrop-filter: blur(2px)
    &:hover,
    &:active, &:focus, &:focus-visible
        background: rgba(255, 255, 255, 0.92)

.bf-wht-s
    background: rgba(255, 255, 255, 0.382)
    backdrop-filter: blur(2px)
    &:hover,
    &:active, &:focus, &:focus-visible
        background: rgba(255, 255, 255, 0.618)

.bf-wht-t
    background: rgba(255, 255, 255, 0.12)
    backdrop-filter: blur(1px)
    &:hover,
    &:active, &:focus, &:focus-visible
        background: rgba(255, 255, 255, 0.16)
